<!--
 * @Author: LuZeng
 * @Date: 2022-08-29 14:05:42
 * @LastEditTime: 2022-09-02 09:12:27
 * @LastEditors: LuZeng
 * @Description: 小白本白，写的不好多多包涵！！！
 * @FilePath: \jsd:\rjiananzhuang\WEB\WEB workspace\lot-music\src\views\Find\index.vue
 * 别乱动！
-->
<template>
  <div>
    <header>
      <ul>
        <li
          v-for="item in tabList"
          :key="item.path"
          @click="clickTab(item.name)"
        >
          <span :class="item.path == $route.path ? 'active' : ''">{{
            item.label
          }}</span>
        </li>
      </ul>
    </header>
    <div class="main">
      <keep-alive>
        <router-view :main="main"></router-view>
      </keep-alive>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tabList: [
        {
          path: "/find/recommend",
          name: "recommend",
          label: "个性推荐",
        },
        {
          path: "/find/songlist",
          name: "songlist",
          label: "歌单",
        },
        {
          path: "/find/ranking",
          name: "ranking",
          label: "排行榜",
        },
        {
          path: "/find/singer",
          name: "singer",
          label: "歌手",
        },
      ],
    };
  },
  props: ["main"],
  methods: {
    clickTab(name) {
      this.$router.push({ name });
    },
  },
};
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 50px;
  ul {
    margin-left: 20px;
    display: flex;
    li {
      line-height: 50px;
      font-weight: lighter;
      font-size: 16px;
      margin-right: 20px;
      cursor: pointer;
      color: rgb(58, 57, 57);
    }
    li:hover {
      color: black;
    }
    .active {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 4px solid #ff7a9e;
    }
  }
}
.mian {
  width: 100%;
}
</style>